<template>
  <ve-card
    :title="'年检单号：' + record.inspectionNo"
    :sub-title="record.assetFeeStatusName"
    :type="getCardType(record)"
    @tap="handleDetail(record)"
  >
    <ve-cell-val label="年检有效期至" :value="record.planTime" />
    <ve-cell label="年检证">
      <preview-button title="查看年检证" :fileId="record.inspectionFileId" />
    </ve-cell>
    <ve-cell-val label="年检单关联门店" :value="record.siteName" />
    <ve-cell-val label="本次年检日期" :value="record.inspectionTime" formate="date" />
    <ve-cell label="年检厂">{{ record.location || '-' }}</ve-cell>
    <ve-cell label="收支类型">付款</ve-cell>
    <ve-cell-price label="年检费" :value="record.inspectionAmount" />
    <ve-cell-val label="负责人" :value="record.undertaker" />
    <ve-operate-list v-if="operatable" :operates="operates" :record="record" />
  </ve-card>

  <!-- 二次确认 -->
  <ve-confirm titleText="提示" v-model="confirmVisible" @confirm="handleDelete">
    <view class="confirmCont">
      <view>请再次确认是否删除年检记录？</view>
    </view>
  </ve-confirm>
</template>

<script setup>
  import { ref } from 'vue'
  import { deleteInspect } from '@/api/asset/car-inspect'
  import { usePermission } from '@/hooks/usePermission'
  import PreviewButton from '@/components/preview-button.vue'

  const props = defineProps({
    record: {
      type: Object,
      default: () => {},
    },
    operatable: {
      type: Boolean,
      default: true,
    },
  })

  const inspectionFileIds = ref([])
  if (props.record.inspectionFileId) {
    inspectionFileIds.value = [props.record.inspectionFileId]
  }

  const operates = ref([
    {
      label: '详情',
      permission: 'svmsapp:car-manage.detail.inspectRecord.detail',
      method: (record) => {
        handleDetail(record)
      },
    },
    {
      label: '编辑',
      permission: 'svmsapp:car-manage.detail.inspectRecord.edit',
      method: (record) => {
        uni.navigateTo({
          url: `/pages/asset/car-inspect/form?id=${record.id}`,
        })
      },
    },
    {
      label: '结算',
      permission: 'svmsapp:car-manage.detail.inspectRecord.settlement',
      show: (record) => {
        // 0未付款,1已付款,5已驳回
        return [0, 5].includes(record.assetFeeStatus)
      },
      method: (record) => {
        uni.navigateTo({
          url: '/pages/asset/asset-fee/settlement-fee?id=' + record.assetFeeId,
        })
      },
    },
    {
      label: '操作记录',
      permission: 'svmsapp:car-manage.detail.inspectRecord.operateLog',
      method: (record) => {
        uni.navigateTo({
          url: '/pages/utils/logs?type=4&id=' + record.id,
        })
      },
    },
    {
      label: '删除',
      permission: 'svmsapp:car-manage.detail.inspectRecord.delete',
      method: (record) => {
        currentClose.value = record
        confirmVisible.value = true
      },
    },
  ])
  const handleDetail = (record) => {
    if (usePermission('svmsapp:car-manage.detail.inspectRecord.detail')) {
      const url = `/pages/asset/car-inspect/detail?id=${record.id}`
      uni.navigateTo({
        url,
      })
    }
  }

  const confirmVisible = ref(false)
  const currentClose = ref({})
  const handleDelete = () => {
    deleteInspect({ id: currentClose.value.id }).then(() => {
      uni.showToast({
        title: '删除成功！',
        icon: 'success',
      })
      confirmVisible.value = false
      uni.$emit('carInspect_getList')
    })
  }

  const getCardType = (record) => {
    // assetFeeStatus 0未付款 1已付款 5已驳回
    const feeStatusMap = {
      0: 'yellow',
      1: 'blue',
      5: 'gray',
    }
    // 获取对应的 cardType，若无匹配则返回默认值 'gray'
    return feeStatusMap[record.assetFeeStatus] || 'gray'
  }
</script>

<style lang="less" scoped>
  .overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
